<template>
	<view class="container">
		<view class="use_item">
			<view class="title">
				用户姓名
			</view>
			<input v-model="form.name" placeholder="请输入姓名" placeholder-style="color:#CCCCCC;font-size:32rpx" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item">
			<view class="title">
				联系电话
			</view>
			<input v-model="form.phone" placeholder="请输入电话" placeholder-style="color:#CCCCCC;font-size:32rpx" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item">
			<view class="title">
				用车类型
			</view>
			<picker @change="bindPickerChange" :value="form.carType" :range="carTypeList" :range-key="'name'">
				<view class="uni-input">{{carTypeList[index].name}}</view>
			</picker>
			<!-- <input v-model="form.carType" placeholder="请选择用什么车" placeholder-style="color:#CCCCCC;font-size:32rpx" /> -->
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item">
			<view class="title">
				出发时间
			</view>
			<view class="" style="flex:1">
				<e-picker-plus @confirm="sdateChange" mode="YMDhm">
					<view class="picker">{{sdate}}</view>
				</e-picker-plus>
			</view>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>

		<Blank></Blank>
		<view class="use_item">
			<view class="title">
				出发城市
			</view>
			<region-picker class="picker" @change="region_change" :value="350104">
				<view class="picker">{{form.leaveCity}}</view>
			</region-picker>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item" @click="setOut">
			<view class="title">
				出发地点
			</view>
			<input v-model="form.leaveArea" placeholder="请输入出发地点" placeholder-style="color:#CCCCCC;font-size:32rpx" :disabled="!form.leaveArea"/>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item" @click="go_change">
			<view class="title">
				目的地点
			</view>
			<!-- <region-picker @change="go_change" :value="350104">
				<view class="picker">{{form.goArea}}</view>
			</region-picker> -->
			<!-- <view class="picker">{{form.goArea}}</view> -->
			<input placeholder="请选择目的地点" v-model="form.goArea" placeholder-style="color:#CCCCCC;font-size:32rpx" :disabled="!form.goArea" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item">
			<view class="title">
				乘车人数
			</view>
			<input v-model="form.number" placeholder="请输入乘车人数(选填)" placeholder-style="color:#CCCCCC;font-size:32rpx" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item">
			<view class="title">
				用途
			</view>
			<view class="readio" style="flex: 1;">
				<label class="radio picker flex_start" style="float: right;">
					<radio value="1" :checked="isgroup" color="#007AFF" @click="radio(true)"/><text @click="radio(true)" style="margin-right: 30rpx;">载人</text>
					<radio value="2" :checked="!isgroup" color="#007AFF" @click="radio(false)"/><text @click="radio(false)">载物	</text>
				</label>
			</view>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item" v-if="!isgroup">
			<view class="title">
				货物类型
			</view>
			<input v-model="form.goodsType" placeholder="请输入货物类型(选填)" placeholder-style="color:#CCCCCC;font-size:32rpx" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item" v-if="!isgroup">
			<view class="title">
				货物尺寸
			</view>
			<input v-model="form.size" placeholder="请输入货物尺寸(选填)" placeholder-style="color:#CCCCCC;font-size:32rpx" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item" v-if="!isgroup">
			<view class="title">
				详情标签
			</view>
			<input v-model="form.detailLabel" placeholder="请选择详情标签" placeholder-style="color:#CCCCCC;font-size:32rpx" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item">
			<view class="title">
				预估价格
			</view>
			<input v-model="form.price" placeholder="预估价格" style="color:red" placeholder-style="color:#CCCCCC;font-size:32rpx" disabled="true"/>
			<view class="" style="color:#999999;font-size:32rpx">元</view>
		</view>
		<Blank></Blank>
		<view class="car_require">
			<view class="tip">
				请补用车需求
			</view>
			<textarea v-model="form.remark" placeholder-style="color:#BBBBBB" placeholder="请输入用车详细需求" maxlength="500" />
			</view>
		<view class="car_image" style="display: flex; flex-wrap: wrap;" v-if="!isgroup">
			<view class="tip">
				<view class="">
					请添加货物图片或视频
				</view>
				<view class="no_require">
					(不必须)
				</view>
				
			</view>
			<view class="package_img" v-if="!form.goodsFile[0]" @click="upload()">
				<image  src="../../static/img/photo.png" mode=""></image>
			</view>
			<view v-else v-for="(item,index) in form.goodsFile" :key="index" class="package_img" @click="upload()">
					<image :src="  item" mode=""></image>
			</view>
		</view>
		<HandleBtn btnName="确认发布" @click.native="submit()" class="confirm_btn"></HandleBtn>

	</view>
</template>

<script>
	import Blank from "../../components/blank.vue"
	import HandleBtn from "../../components/handleBtn.vue"
	export default {
		components: {
			Blank,
			HandleBtn
		},
		data() {
			return {
				carPrice: 0,
				isgroup: false,
				form:{
					name:"",
					phone:"",
					carType:"",
					leaveTime:"",
					leaveArea :"",
					leaveCity:"请选择出发城市",
					goArea:"",
					price:"0",
					detailLabel:"",
					remark:"",
					goodsFile:[],
					number:'',
					goodsType:'',
					size:'',
					goLongitude:'',//目的地经度
					goDimension:'',//目的地维度
					leaveLongitude:'',//出发点地经度
					leaveDimension:''//出发点维度
				},
				imgsFile:'',
				sdate: '请选择出发时间',
				carTypeList: [
					{
						createTime: 1593421377,
						desc: "用车",
						id: 4,
						name: "三轮车",
						sort: 11,
						status: 1,
					}
				],
				index: 0,
			}
		},
		created() {
			this.getCarType()
		},
		onShow() {
			this.form.phone = this.form.phone || uni.getStorageSync('userinfo').phone
			this.form.name = this.form.name || uni.getStorageSync('userinfo').nickname
		},
		methods: {
			radio(tag){
				this.isgroup = tag
			},
			getCarPrice(){
				this.$utils.requert({
					url: 'carPrice',
					data: {carType:this.form.carType},
					type: 'post'
				}).then(res => {
					if (res.code === 1) {
						console.log(res)
						this.carPrice = Number(res.data)
						if (this.form.leaveDimension &&this.form.goDimension) {
							this.form.price = (this.carPrice*this.getDistance(this.form.goDimension,this.form.goLongitude,this.form.leaveDimension,this.form.leaveLongitude)).toFixed(2)
						}
					} else {
						this.$utils.showLayer(res.message)
					}
				})
			},
			getDistance(lat1,lng1,lat2,lng2){ //计算距离
				let EARTH_RADIUS = 6378137;
				let distance = 0;
				let startLongitude = lng1;
				let startLatitude = lat1;
				let endLongitude = lng2;
				let endLatitude = lat2;
				let radLatitude1 = startLatitude * Math.PI / 180.0;
				let radLatitude2 = endLatitude * Math.PI / 180.0;
				let a = Math.abs(radLatitude1 - radLatitude2);
				let b = Math.abs(startLongitude * Math.PI / 180.0 - endLongitude * Math.PI / 180.0);
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2)
								+ Math.cos(radLatitude1) * Math.cos(radLatitude2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * EARTH_RADIUS;
				distance = Math.round(s * 10000) / 10000; // 返回距离单位是公里
				console.log('相距公里：'+distance/1000)
				console.log('相距米：'+distance)
				return distance/1000;
			},
			//选择开始时间
			sdateChange(e) {
				this.sdate = e.result
				this.form.leaveTime = e.result
			},
			bindPickerChange(e) {
			    console.log('picker发送选择改变，携带值为', e.target.value)
			    this.index = e.target.value
					this.form.carType = this.index 
					this.getCarPrice()
			},
			//发布
			submit(){
				// this.form.leaveCity = uni.getStorageSync('addr')||''
				if (this.form.leaveCity == '请选择出发城市') {
					this.$utils.showLayer('请选择出发城市')
					return
				}
				if (this.form.price < 1) {
					this.$utils.showLayer('距离太近，建议步行哦')
					return
				}
				this.$utils.requert({url:'carUse',type:'post',data:this.form}).then(res=>{
					if(res.code === 1 ){
						this.$utils.showLayer(res.message)
						this.userinfo = res.data
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2000)
					}else{    
						this.$utils.showLayer(res.message)
						if (res.message == '余额不足，请先充值') {
							setTimeout(()=>{
								uni.navigateTo({
									url:'/pages/rechargeCenter/rechargeCenter'
								})
							},1000)
						}
					}
				})
			},
			//获取cartype
			getCarType(){
				this.$utils.requert({url:'carType',type:'get',data:{}}).then(res=>{
						if(res.code === 1 ){
							this.carTypeList = res.data
							this.form.carType = res.data[0].id
							this.getCarPrice()
						}else{    
							this.$utils.showLayer(res.message)
						}
					})
			},
			//图片上传
			upload(){
				   uni.chooseImage({
					count: 2,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res=> {
						const file = res.tempFilePaths[0]
						const  token  = uni.getStorageSync('token')
						uni.uploadFile({
							url: this.$utils.domain+'/api/api/uploadImg', //仅为示例，非真实的接口地址
							filePath: file,
							name: 'file',
							header:{
								'accessToken':token
							},
							formData: {
								'type': '2'
							},
							success: (res) => {
								var res = JSON.parse(res.data)
								this.imgsFile = this.form.goodsFile.push(res.data.src)
							}
						});
					},
					error : function(e){
					 // console.log(e);		
					}
				  });
			},
			//出发城市选择
			region_change(e){
				// console.log(e)
				this.form.leaveCity = e.detail.value[1]
				// this.form.leaveCity = e.detail.value[0]+e.detail.value[1]+e.detail.value[2]
			},
			//目的地选择
			go_change(e){
				// console.log(e)
				var _this=this;
				if (!_this.form.goArea) {
					uni.chooseLocation({
						success(res) {
							console.log(res)
							_this.form.goDimension = res.latitude
							_this.form.goLongitude = res.longitude
							_this.form.goArea = res.name
							if (_this.form.leaveDimension) {
								_this.form.price = (_this.carPrice*_this.getDistance(_this.form.goDimension,_this.form.goLongitude,_this.form.leaveDimension,_this.form.leaveLongitude)).toFixed(2)
							}
						}
					})
				}
			},
			setOut(){
				var _this=this;
				if (!_this.form.leaveArea) {
					uni.chooseLocation({
						success(res) {
							console.log(res)
							_this.form.leaveDimension = res.latitude
							_this.form.leaveLongitude = res.longitude
							_this.form.leaveArea = res.name
							// _this.form.detailAddress = res.address
							if (_this.form.goDimension) {
								_this.form.price = (_this.carPrice*_this.getDistance(_this.form.goDimension,_this.form.goLongitude,_this.form.leaveDimension,_this.form.leaveLongitude)).toFixed(2)
							}
						}
					})
				}
			},
			// 获取年月日信息
				getDate(type) {
					const date = new Date();
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
				
					if (type === 'start') {
						year = year - 60;
					} else if (type === 'end') {
						year = year + 2;
					}
					month = month > 9 ? month : '0' + month;;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
				}
			},
			computed: {
					startDate() {
						return this.getDate('start');
					},
					endDate() {
						return this.getDate('end');
					}
				},
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
	}

	.use_item {
		padding: 38rpx 0;
		margin:0 24rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f6f6f6;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.use_item:nth-child(2){
		border-bottom: none;
	}
	.use_item:nth-child(7){
		border-bottom: none;
	}

	.use_item .title {
		font-size: 32rpx;
		color: #868686;
		flex-shrink: 0;
	}

	.use_item input {
		font-size: 32rpx;
		flex: 1;
		text-align: right;
		padding-right: 30rpx;
		margin-left: 100rpx;
	}
	.use_item .picker{
		font-size: 32rpx;
		/* margin-left: 300rpx; */
		flex: 1;
		text-align: right;
		padding-right: 30rpx;
		margin-left: 100rpx;
	}
	.use_item picker{
		font-size: 32rpx;
		margin-left: 300rpx;
	}	
	.use_item image{
		width: 14rpx;
		height: 24rpx;
	}
	.tip{
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 34rpx;
		width: 100%;
	}
	textarea{
		background-color: #f5f4f6;
		font-size: 28rpx;
		width: 100%;
		border-radius: 7rpx;
		padding:32rpx 24rpx;
		box-sizing: border-box;
	}
	.car_require {
		padding:50rpx 24rpx;
		box-sizing: border-box;
	}
	.car_image{
		padding:0 24rpx 50rpx;
		box-sizing: border-box;
	}
	.car_image .tip{
		display: flex;
	}
	.car_image .tip .no_require{
		font-size: 28rpx;
		color: #BBBBBB;
	}
	.car_image .package_img{
		width:200rpx;
		height: 200rpx;
		background-color: #f5f4f6;
		text-align: center;
		margin-left: 10rpx;
	}
	.car_image .package_img image{
		width: 100%;
		height: 100%;
	}
	.confirm_btn{
		margin-top: 70rpx;
		margin-bottom: 70rpx;
	}
</style>
